<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="X-UA-Compatible" content="chrome=1;IE=edge">
    <meta name="viewport" content="user-scalable=no">
    <link rel="stylesheet" href="../../../railView/css/railbox.css" type="text/css" />
    <script type="text/javascript" src="../../../railView/js/railbox-2.0.0.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/UUID.js"></script>
    <style>
        #buttom-container {
            position: absolute;
            top: 4px;
            left: 45px;
            z-index: 99;
        }
        .button {
            padding: 0 10px;
            min-width: 54px;
            height: 30px;
            line-height: 30px;
            margin: 4px;
            text-align: center;
            border-radius: 3px;
            border: none;
            cursor: pointer;
            background: rgba(34, 45, 50, 0.7);
            color: #FFFFFF;
        }
        .button:hover {
            background: rgb(34, 45, 50);
        }
        #oprate-container {
            z-index: 99;
            position: absolute;
            top: 40px;
            left: 48px;
            border-radius: 3px;
            box-shadow: 0 0 10px rgba(34, 45, 50, 0.7);
            display: none;
        }
        #oprate-container > .oprate-content {
            padding: 20px 30px;
        }
        .oprate-item {
            color: #676767;
            padding-bottom: 10px;
        }
        .oprate-item:last-child {
            padding-bottom: 0;
        }
        .oprate-item > span {
            color: black;
        }
        .input {
            height: 25px;
            line-height: 25px;
            background-color: #fff;
            border: 2px solid #e6e6e6;
            border-radius: 3px;
            color: #999999;
        }
        .input:focus {
            outline: 0;
            box-shadow: 0px 0px 5px rgb(34 45 50);
        }
        .head {
            display: flex;
            justify-content: space-between;
            height: 35px;
            line-height: 35px;
            border-bottom: 1px solid #999999;
            background-color: #45a3ff;
            box-sizing: border-box;
            padding: 0 10px;
            position: relative;
            color: #FFFFFF;
        }
        .head>span:last-child {
            cursor: pointer;
            color: #45a3ff;
            font-size: 12px;
            height: 18px;
            width: 18px;
            line-height: 18px;
            text-align: center;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            right: 3%;
            transform: translateY(-50%);
            background: #FFFFFF
        }
        .footer {
            width: 100%;
            height: 35px;
            line-height: 35px;
            color: #45a3ff;
            border-top: 1px solid #999999;
            display: flex;
            justify-content: space-between;
        }
        .footer > span {
            cursor: pointer;
            padding: 0 10px;
        }
    </style>
</head>
<body>
    <div id="buttom-container">
        <button class="button" onclick="mouseOperate()">模型旋转范围角度</button>
    </div>
    <div id="oprate-container">
        <div class="head">
            <span>设置</span>
            <span onclick="hideModel()">&#10005;</span>
        </div>
        <div class="oprate-content">
            <div class="oprate-item">
                <span>上：</span>
                <input id="up" value="10" class="input">
            </div>
            <div class="oprate-item">
                <span>下：</span>
                <input id="bottom" value="20" class="input">
            </div>
            <div class="oprate-item">
                <span>左：</span>
                <input id="left" value="30" class="input">
            </div>
            <div class="oprate-item">
                <span>右：</span>
                <input id="right" value="40" class="input">
            </div>
        </div>
        <div class="footer">
            <span onclick="handleSubmit()">确定</span>
            <span onclick="resetToDefault()">恢复默认设置</span>
        </div>
    </div>
    <div id="mouse" style="width:100%;height:100%;position:relative;float:left"></div>
    <script id="viewerStartup">
        let mouse;
        window.onload = function () {
            let proleft = new CarsView("mouse", 'csr', exampleModelId, callbackleft, {
                isShowAxis: true
            });
            proleft.then(function (value) {
                mouse = value;
            });
        };
        function callbackleft(nodeNames, nodeIds, position, center, normal) {};
        function handleSubmit() {
            let up = Number(document.getElementById('up').value);
            let bottom = Number(document.getElementById('bottom').value);
            let left = Number(document.getElementById('left').value);
            let right = Number(document.getElementById('right').value);
            console.log(up, bottom,left,right, 'handleSubmit');
            mouse.setRotationDegree(up, bottom,left,right);
        }
        // 恢复默认   
        function resetToDefault() {
            document.getElementById('up').value = 10;
            document.getElementById('bottom').value = 20;
            document.getElementById('left').value = 30;
            document.getElementById('right').value = 40;
            mouse.setRotationDegree(10, 20, 30, 40);;
        } 
        function mouseOperate() {
            let oprate = document.getElementById('oprate-container');
            oprate.style.display = 'block';
        };
        // 隐藏弹框
        function hideModel() {
            let oprate = document.getElementById('oprate-container');
            oprate.style.display = 'none';
        }
    </script>

</body>
</html>
